<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #f0f1f1;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .top {
            height: 49px;
            background-color: #323232;
        }
        
        .top .img {
            float: left;
            width: 183px;
            height: 116px;
            /* position: fixed; */
            position: absolute;
            top: 0;
            /* overflow: hidden; */
        }
        
        .top ul {
            /* float: right; */
            width: 485px;
            height: 49px;
            /* background-color: pink; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            float: left;
            margin-left: 49px;
            /* overflow: hidden; */
            padding-left: 200px;
        }
        
        .top ul li {
            width: 87px;
            height: 49px;
            line-height: 49px;
            text-align: center;
            color: #817979;
        }
        
        .top ul li:hover {
            background-color: #dd4012;
        }
        
        .top ul li:hover a {
            color: white;
        }
        
        .top .top-con .first {
            background-color: #dd4012;
            color: white;
        }
        
        .top a {
            color: #817979;
        }
        
        .top-rt {
            width: 270px;
            height: 49px;
            float: right;
            line-height: 49px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .top-con {
            width: 1107px;
            height: 49px;
            margin: auto;
            /* background-color: pink; */
        }
        
        .banner {
            width: 100%;
            height: 217px;
            background: url(img/banner.png);
        }
        
        .banner-bottom {
            width: 100%;
            height: 27px;
            background-color: rgb(0, 0, 0, 0.5);
            transform: translateY(190px);
        }
        
        .banner-bottom .span {
            width: 1107px;
            height: 27px;
            margin: auto;
            /* background-color: palegoldenrod; */
            color: #a6a6a6;
            /* margin-left: -500px; */
        }
        
        .middle {
            width: 1107px;
            height: 30px;
            margin: auto;
            /* background-color: pink; */
            margin-top: 25px;
        }
        
        .middle-con {
            width: 415px;
            height: 30px;
            /* background-color: turquoise; */
            display: flex;
            justify-content: space-evenly;
        }
        
        .middle-con li {
            width: 78px;
            height: 30px;
            background-color: white;
            text-align: center;
            line-height: 30px;
            color: #817979;
        }
        
        .middle-con .first1 {
            background-color: #636363;
            color: white;
        }
        
        .middle1 {
            width: 1107px;
            height: 1100px;
            /* background-color: paleturquoise; */
            margin: auto;
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            /* align-content: space-between; */
        }
        
        .middle1 .model {
            width: 260px;
            height: 220px;
            background-color: plum;
        }
        
        .middle1 .img {
            overflow: hidden;
            width: 260px;
            height: 156px;
        }
        
        .middle1 img {
            transition: all 0.5s;
        }
        
        .middle1 .img img:hover {
            transform: scale(1.1);
        }
        
        .middle1 h3 {
            font-weight: normal;
            font-size: 15px;
            margin-top: 12px;
            margin-left: 13px;
            color: black;
            transition: all 0.5s;
        }
        
        .middle1 h3:hover {
            color: #dd4012;
        }
        
        .middle1 h4 {
            font-weight: normal;
            font-size: 12px;
            margin-top: 12px;
            margin-left: 13px;
            color: #939292;
        }
        
        .foot {
            height: 82px;
            background-color: #323232;
            overflow: hidden;
        }
        
        .foot-con {
            width: 1107px;
            height: 82px;
            /* background-color: paleturquoise; */
            margin: auto;
        }
        
        .foot-con .foot-lf {
            width: 164px;
            height: 82px;
            /* line-height: 82px; */
            float: left;
            /* background-color: plum; */
            display: flex;
            align-items: center;
        }
        
        .foot-con .foot-rt {
            width: 620px;
            height: 82px;
            float: right;
            /* background-color: peachpuff; */
        }
        
        .foot-con .foot-rt1 {
            width: 384px;
            height: 20px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            float: right;
            margin-top: 20px;
            margin-bottom: 10px;
            color: #999999;
        }
        
        .foot-con .foot-rt2 {
            width: 610px;
            height: 20px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            float: right;
            color: #666666;
        }
        
        #model {
            display: none;
        }
        
        .middle2 {
            width: 1107px;
            height: 36px;
            margin: auto;
            /* background-color: pink; */
            margin-top: 45px;
            margin-bottom: 40px;
        }
        
        .middle2 .middle2-con {
            width: 242px;
            height: 36px;
            /* background-color: pink; */
            margin: auto;
            display: flex;
            justify-content: space-between;
        }
        
        .middle2 .middle2-con li {
            width: 37px;
            background-color: white;
            text-align: center;
            line-height: 37px;
            color: #b1a9bb;
        }
    </style>
</head>

<body>
    <div class="top">
        <div class="top-con">
            <div class="img">
                <img src="img/logo.jpg" alt="">
            </div>

            <ul>
                <li><a href="index.html">网站首页</a></li>
                <li><a href="">传悦资源</a></li>
                <li class="first"><a href="" style="color: white;">传悦案例</a></li>
                <li><a href="">传悦服务</a></li>
                <li><a href="solution.html">解决方案</a></li>
                <li><a href="">需求提交</a></li>
            </ul>
            <div class="top-rt">
                <img src="img/tel.png" alt="" class="tel"><span style="color:#817979 ;">0535-606552189</span>
                <img src="img/qq.png" alt="" class="qq">
                <img src="img/wb.png" alt="" class="wb">
                <img src="img/wx.png" alt="" class="wx">
                <img src="img/email.png" alt="" class="email">
            </div>
        </div>
    </div>
    <div class="banner">
        <div class="banner-con">
        </div>
        <div class="banner-bottom">
            <div class="span">
                <p>
                    网络首页>传悦案例
                </p>
            </div>
        </div>
    </div>
    <div class="middle">
        <ul class="middle-con">
            <li class="first1">全部</li>
            <li>网站建设</li>
            <li>推广运营</li>
            <li>品牌策划</li>
            <li>网络全案</li>
        </ul>

    </div>
    <ul class="middle1">
        <li id="model">
            <div class="img">
                <img src="" alt="" class="img2">
            </div>

            <a href="case.care.html">
                <h3></h3>
            </a>
            <h4></h4>


        </li>
    </ul>
    <div class="middle2">
        <ul class="middle2-con">
            <li>&lt;</li>
            <li>1</li>
            <li style="background-color: #dd4012; color: white;">2</li>
            <li>3</li>
            <li>4</li>
            <li>&gt;</li>
        </ul>
    </div>
    <div class="foot">
        <div class="foot-con">
            <div class="foot-lf">
                <img src="img/logo小.png" alt="">
            </div>
            <div class="foot-rt">
                <ul class="foot-rt1">
                    <li>关于传悦</li>
                    <li>新闻动态</li>
                    <li>传悦观点</li>
                    <li>联系传悦</li>
                    <li>加入传悦</li>
                    <li>付款账户</li>
                </ul>
                <ul class="foot-rt2">
                    <li>Copyright 2013</li>
                    <li>创梦网络科技有限公司</li>
                    <li>传悦Chnyoo.cn All Rights Reserved</li>
                    <li>京ICP备12005221号</li>
                </ul>
            </div>
        </div>
    </div>



</body>
<script>
    let http = new XMLHttpRequest()
    let middle1 = document.querySelector(".middle1");
    let model = document.querySelector('#model');
    let id =

        http.open("get", 'http://10.35.164.15:81/caseList')
    http.send();
    http.onreadystatechange = function() {
        if (http.readyState === 4) {
            let caseList = JSON.parse(http.responseText);
            caseList.forEach(function(item) {
                let newItem = model.cloneNode(true);
                newItem.id = "";
                middle1.appendChild(newItem)
                newItem.querySelector(".img2").src = item.img1;
                newItem.querySelector("h3").innerHTML = item.h3;
                newItem.querySelector("h4").innerHTML = item.h4;
                let a = newItem.querySelector(".middle1 a");
                a.setAttribute("href", a + `?id=${item.id}`)



            })
        }
    }
</script>

</html>